<template>
  <div>
    <BreadCrumbShow />

    <div class="to-approve">
      <el-button
        type="primary"
        size="small"
        @click="toApproveAll"
        class="approve"
        :disabled="approveApplyList.length == 0"
      >
        <img
          class="approve-img"
          src="@/assets/images/form/approve.png"
          alt="全部批准通过"
        />
        全部批准通过
      </el-button>
    </div>

    <LogTable
      refName="approveApply"
      @pageChange="pageChange"
      :type="1"
      :data-source="approveApplyList"
      :data-config="tableConfig"
      :total="total"
      :pageSize="pageSize"
      :pageNum="pageNum"
      :isLoading="isLoading"
    >
      <template #boxInfoHeader>
        <div class="header-select">
          <div class="title-one">调阅明细</div>
        </div>
      </template>

      <template #rowHead="{ row }">
        <div class="mar-right">
          订单号：
          <span class="hover-change" @click="goOrderDetail(row)">{{
            row.orderNumber
          }}</span>
        </div>
        <div class="mar-right">{{ row.createdOn }}</div>
        <!-- <div class="mar-right" v-if="row.subType == 3">
          清晰度：
          {{
            row.orderBorrowAttrBean &&
            row.orderBorrowAttrBean.borrowClarity == 0
              ? "普通"
              : row.orderBorrowAttrBean &&
                row.orderBorrowAttrBean.borrowClarity == 1
              ? "高清"
              : "超清"
          }}
        </div> -->
        <div class="mar-right" v-if="row.subType == 3">
          是否加密：
          {{
            row.orderBorrowAttrBean && row.orderBorrowAttrBean.isEncrypted == 1
              ? "是"
              : "否"
          }}
        </div>

        <div class="mar-right" v-if="row.subType != 3">
          {{ commonFun.getLabel(borrowSignType, row.orderBorrowAttrBean.borrowSign) }}
        </div>
        <div
          class="mar-right yellow-show"
          v-if="
            row.orderBorrowAttrBean && row.orderBorrowAttrBean.isUrgent == 1
          "
        >
          <i class="el-icon-star-on"></i>
          加急件
        </div>
      </template>

      <div slot="boxInfo"></div>
      <template #boxInfo="{ row }">
        <div class="box-code">
          <div
            v-for="(box, index) in row.boxInfo"
            :key="index"
            class="box"
            :class="[
              'box',
              index !== row.boxInfo.length - 1 ? 'border-bottom' : '',
            ]"
          >
            <div class="box-code-left" @click="goBoxDetail(box)">
              <BoxIconShow :rowInfo="box" />
            </div>
            <div>
              <div
                class="access-detail"
                v-if="box.detail && box.detail.length <= 15"
              >
                {{ box.detail }}
              </div>

              <el-tooltip
                v-if="box.detail && box.detail.length > 15"
                :content="box.detail"
                placement="top"
                width="200"
                effect="light"
              >
                <div class="access-detail">
                  {{ box.detail }}
                </div>
              </el-tooltip>
            </div>
            <div class="box-operate">
              <!-- <el-button
                v-if="row.boxInfo.length > 1 && box.status == 0"
                type="text"
                size="mini"
                @click.native="cancelBox(row, box)"
                >取消窍</el-button 
              >-->
              <div v-if="row.boxInfo.length > 1 && box.status != 0">
                <div>{{ commonFun.getLabel(orderStatus, box.status) }}</div>
                <el-button
                  type="text"
                  size="mini"
                  @click="toshowVoucher(2, box)"
                  ><i class="el-icon-s-order"></i>取消凭证</el-button
                >
              </div>
            </div>
          </div>
          <i v-if="row.currentPage < row.totalPage" class="el-icon-d-arrow-right show-more" @click="showMore(row)"></i>
        </div>
      </template>
      <template #subType="{ row }">
        <div class="cell-tag">
          {{ commonFun.getLabel(allSubType, row.subType) }}
        </div>
      </template>
      <template #status="{ row }">
        <div class="cell-tag">
          {{ commonFun.getLabel(orderStatus, row.status) }}
        </div>
      </template>

      <template #contactName="{ row }">
        <div class="cell-popover">
          <el-popover placement="top" width="200" trigger="hover">
            <div>
              <div class="popover-item">
                <i class="el-icon-user-solid"></i>
                <span>{{ row.contactName }}</span>
              </div>
              <div class="popover-item">
                <i class="el-icon-location"></i>
                <span>
                  {{ row.address ? row.address : "无" }}
                </span>
              </div>
              <div class="popover-item">
                <i class="el-icon-phone"></i
                ><span>{{ commonFun.showSecretPhone(row.contactMobile) }} </span>
              </div>
            </div>

            <div slot="reference" class="popover-reference">
              {{ row.contactName }} <i class="el-icon-user-solid"></i>
            </div>
          </el-popover>
        </div>
      </template>

      <template #applyName="{ row }">
        <!-- <div class="cell-tag">
          <div>
            {{ row.userName }}
          </div>
          <div>
            {{ commonFun.showSecretPhone(String(row.mobile)) }}
          </div>
        </div> -->
        <div class="cell-popover">
          <el-popover placement="top" width="200" trigger="hover">
            <div>
              <div class="popover-item">
                <i class="el-icon-user-solid"></i>
                <span>{{ row.userName }}</span>
              </div>
              <div class="popover-item">
                <i class="el-icon-phone"></i
                ><span>{{ commonFun.showSecretPhone(String(row.mobile)) }} </span>
              </div>
            </div>

            <div slot="reference" class="popover-reference">
              {{ row.userName }} <i class="el-icon-user-solid"></i>
            </div>
          </el-popover>
        </div>
      </template>
      <template #detail="{ row }">
        <div class="cell-tag">
          <el-tooltip
            class="item"
            effect="dark"
            :content="
              row.orderBorrowAttrBean && row.orderBorrowAttrBean.borrowPurposes
            "
            placement="top"
          >
            <el-button type="text" size="mini">
              <i class="el-icon-info"></i>
              调阅用途</el-button
            >
          </el-tooltip>
          <div>
            <el-button type="text" size="mini" @click="toshowVoucher(1, row)">
              <i class="el-icon-folder-opened"></i> 调阅凭证</el-button
            >
          </div>
        </div>
      </template>

      <template #operate="{ row }">
        <div class="btn-show">
          <el-button
            type="primary"
            size="small"
            @click="approveItem(row)"
            class="approve-btn"
            >批 准</el-button
          >

          <el-button
            size="small"
            @click.native="cancelRead(row)"
            class="cancel-btn"
            >驳 回</el-button
          >
        </div>
      </template>
    </LogTable>

    <CancelDialog
      title="取消调阅"
      :btnOutLoading="btnOutLoading"
      :isShowCancel="isShowCancel"
      @submit="submit"
      @closeDialog="closeDialog"
    />

    <VoucherShow
      :title="voucherTitle"
      :isShowVoucher.sync="isShowVoucher"
      :voucherList="voucherList"
      @closeDialog="closeVoucherDialog"
    />
  </div>
</template>

<script>
import { borrowSignType, orderStatus, allSubType } from "@/utils/dictionary.js";
import LogTable from "@/components/table/LogTable.vue";
import VoucherShow from "./components/VoucherShow";
import BoxIconShow from "@/components/public-style/BoxIconShow";
import {
  getOrderList,
  getOrderListCount,
  getOrderBoxList,
  approveAllReadOrder,
  approveReadOrder,
  cancelReadOrder,
  getOrderFileList,
} from "../../api/access-manage/index";
import CancelDialog from "./components/CancelDialog";

export default {
  components: {
    LogTable,
    CancelDialog,
    VoucherShow,
    BoxIconShow,
  },
  data() {
    return {
      allSubType: allSubType,
      orderStatus: orderStatus,
      borrowSignType: borrowSignType,
      voucherTitle: "凭证",
      isShowVoucher: false,
      voucherList: [],
      btnOutLoading: false,
      cancelData: {},
      isShowCancel: false,
      approveApplyList: [],
      pageTitle: "待审批调阅",
      tableConfig: [
        {
          label: "窍详细",
          prop: "boxInfo",
          width: "700",
          selectOption: [],
        },
        {
          prop: "subType",
          label: "调阅方式",
          showTooltip: false,
        },
        {
          prop: "contactName",
          label: "联系人",
          width: "130",
        },
        {
          prop: "applyName",
          label: "申请人",
        },
        {
          prop: "status",
          label: "状态",
        },
        {
          prop: "detail",
          label: "详情",
        },
        {
          prop: "operate",
          label: "操作",
          width: "180",
        },
      ],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      isLoading: false,
    };
  },
  mounted() {
    this.getAccessOrderList();
  },

  methods: {
    // 凭证弹窗
    toshowVoucher(type, row) {
      // 1 调阅凭证  2 取消凭证
      if (type == 1) {
        this.voucherTitle = "调阅凭证";
        // this.voucherList = [];
        getOrderFileList(row.id, 0).then((res) => {
          this.voucherList = res.data;
        });
      } else if (type == 2) {
        this.voucherTitle = "取消凭证";
        // this.voucherList = [];
        getOrderFileList(row.id, 3).then((res) => {
          this.voucherList = res.data;
        });
      }
      this.isShowVoucher = true;
    },
    // 关闭凭证展示
    closeVoucherDialog() {
      this.isShowVoucher = false;
    },
    // 订单中窍过多  加载更多
    showMore(row) {
      if (row.currentPage < row.totalPage) {
        row.currentPage++;
        getOrderBoxList({orderId: row.id}, {pageSize: 5, pageNum: row.currentPage}).then((res) => {
          row.boxInfo = row.boxInfo.concat(res.data);
          this.$forceUpdate();
        });
      }
    },

    // 去 窍详情
    goBoxDetail(row) {
      // this.$router.push({
      //   name: "BoxDetail",
      //   params: {
      //     id: row.userBoxId,
      //   },
      // });
      let routeUrl = this.$router.resolve({
        name: "BoxDetail",
        params: { id: row.userBoxId },
      });
      window.open(routeUrl.href, "_blank");
    },
    // 去 订单详情
    goOrderDetail(row) {
      // this.$router.push({
      //   name: "OrderDetail",
      //   params: {
      //     id: row.id,
      //   },
      // });
      let routeUrl = this.$router.resolve({
        name: "OrderDetail",
        params: { id: row.id, },
      });
      window.open(routeUrl.href, "_blank");
    },
    // 分页数据变动
    pageChange(emitData) {
      this.pageNum = emitData.pageNum;
      this.pageSize = emitData.pageSize;
      this.getAccessOrderList();
    },
    // 获得 待审批 调阅列表
    getAccessOrderList() {
      let data = {
        type: 0,
        status: 0,
        pending: 1,
      };
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      this.approveApplyList = [];
      this.isLoading = true;
      new Promise((resolve) => {
        getOrderList(data, params)
          .then((res) => {
            res.data.map((e) => {
              e.createdOn = this.$moment(e.createdOn * 1000).format(
                "YYYY-MM-DD HH:mm:ss"
              );
            });

            this.approveApplyList = res.data;
            // this.total = res.total;
            getOrderListCount(data, params).then(resm => {
              this.total = resm
            })

            this.approveApplyList.map((e) => {
              getOrderBoxList({orderId: e.id}, {pageSize: 5, pageNum: 1}).then((res) => {
                e.boxInfo = res.data;
                // 记录当前订单中的总窍数 及 已显示的页数
                e.totalPage = Math.ceil(res.total / 5);
                e.currentPage = 1;
                this.$forceUpdate();
              });
            });

            this.isLoading = false;
          })
          .catch((err) => {
            this.isLoading = false;
          });
      });
    },
    // 全部批准通过
    toApproveAll() {
      this.$confirm("确定批准通过所有调阅申请?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          new Promise((resolev) => {
            this.isLoading = true;
            approveAllReadOrder({ type: 0 })
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "全部待调阅审批通过",
                });
                this.getAccessOrderList();
              })
              .catch((err) => {
                this.getAccessOrderList();
              });
          });
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消",
          // });
        });
    },
    // 批准调阅 -单个
    approveItem(row) {
      this.$confirm("是否确认批准当前调阅申请?", "确认批准调阅", {
        confirmButtonText: "批准通过",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          new Promise((resolev) => {
            this.isLoading = true;
            approveReadOrder({ id: row.id, approvalType: 0 })
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "调阅已通过",
                });
                this.getAccessOrderList();
              })
              .catch((err) => {
                this.getAccessOrderList();
              });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 取消调阅- 展示弹窗
    cancelRead(row) {
      this.isShowCancel = true;
      this.cancelData = row;
    },
    // 取消调阅 -确认
    submit(dataForm, fileList) {
      this.btnOutLoading = true;
      const data = {
        files: fileList,
        ...dataForm,
        id: this.cancelData.id,
        // status: 3,
      }

      new Promise((resolve) => {
        cancelReadOrder(data)
          .then((res) => {
            this.$message({
              type: "success",
              message: "调阅已驳回",
            });
            this.isShowCancel = false;
            this.btnOutLoading = false;
            this.isLoading = true;
            this.getAccessOrderList();
          })
          .catch((err) => {
            this.btnOutLoading = false;
          });
      });
    },

    // 关闭弹窗
    closeDialog() {
      this.isShowCancel = false;
    },

    // 取消窍 - 调阅订单中有多个窍时取消单个窍
    cancelBox(row, box) {
      this.$confirm("是否确认取消当前窍的调阅?", "确认", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        const data = {
          files: [],
          id: row.id,
          userBoxId: box && box.userBoxId,
          // status: 3,
        }
        this.isLoading = true;

        new Promise((resolve) => {
          cancelReadOrder(data)
            .then((res) => {
              this.$message({
                type: "success",
                message: "取消调阅成功",
              });

              this.getAccessOrderList();
            })
            .catch((err) => {
              this.isLoading = false;
            });
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box-code {
  width: 100%;
  .show-more {
    cursor: pointer;
    transform: translateY(-14px) translateX(-15px) rotate(90deg);
    color: #f88125;
    font-size: 16px;
    font-weight: bold;
  }
  .box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 10px;
    height: 100px;
    // margin: 10px 0;
    .box-code-left {
      cursor: pointer;
      display: flex;
      align-items: center;
      .el-image-box {
        height: 60px;
        width: 80px;
        margin-right: 10px;
        text-align: center;
        .el-image {
          height: 100%;
        }
      }
      .title {
        font-size: 12px;
      }
    }
    .access-detail {
      width: 150px;
      word-break: break-all;
      // 超出两行显示 ......
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      text-align: left;
    }
    .box-operate {
      min-width: 62px;
    }
  }
  .border-right {
    border-right: 1px solid #cfcfcf;
  }
  .border-bottom {
    border-bottom: 1px solid #ebeef5;
  }
}
.to-approve {
  margin-top: 10px;
  .approve {
    line-height: 16px;
    font-size: 14px;
    .approve-img {
      float: left;
      margin-right: 6px;
      height: 16px;
    }
  }
}

.hover-change {
  cursor: pointer;
}
.hover-change:hover {
  color: #f88123;
}
.popover-item {
  line-height: 20px;
  font-size: 12px;
  padding-left: 10px;
  i {
    margin-right: 8px;
  }
}
::v-deep  .el-popover__reference-wrapper {
  cursor: pointer;
}

.btn-show {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  ::v-deep .el-button {
    padding-left: 25px;
    padding-right: 25px;
  }
  .approve-btn {
    margin-bottom: 8px;
  }
  .cancel-btn {
    margin-left: 0px;
  }
}
</style>
